<template>
  <div>
    <van-nav-bar
        title="信息修改"
        left-text="返回"
        right-text="保存"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <div>
      <van-row style="background: gainsboro">
        <van-col span="24" style="height: 200px;text-align: center">
          <el-avatar :size="170" :src="icon" style="margin-top: 13px"></el-avatar>
        </van-col>
      </van-row>
      <!--      表单-->
      <div>
        <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message:'不能为空' }]"
        />
        <van-field
            readonly
            clickable
            name="picker"
            :value="value2"
            label="性别"
            placeholder="点击选择性别"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm2"
              @cancel="showPicker = false"

          />
        </van-popup>
        <van-field name="stepper" label="年龄">
          <template #input>
            <van-stepper v-model="stepper"/>
          </template>
        </van-field>
        <van-field
            readonly
            clickable
            name="area"
            :value="value"
            label="地区选择"
            placeholder="点击选择省市区"
            @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
              :area-list="areaList"
              @confirm="onConfirm"
              @cancel="showArea = false"
          />

        </van-popup>
        <van-field name="uploader" label="修改头像">
          <template #input>
            <van-uploader v-model="fileList" multiple/>
          </template>
        </van-field>
      </div>

    </div>

  </div>
</template>

<script>
import AreaList from "@/assets/js/area"
import {Toast} from "vant";

export default {
  name: "Modify",
  data() {
    return {
      icon: '',
      username: '',
      radio: '1',
      stepper: '1',
      value: '',
      value2: '',
      showArea: false,
      areaList: AreaList, // 数据格式见 Area 组件文档,
      fileList: [],
      columns: ["男", "女", '隐藏', '', ''],
      showPicker: false

    }
  },
  methods: {
    onClickLeft() {
      console.log(this.radio)
      this.$router.push('/personal')


    },
    onConfirm2(value2) {
      this.value2 = value2;
      this.showPicker = false;
    },
    onClickRight() {
      if (this.value2 === '男') {
        this.radio = 1
      } else if (this.value2 === '女') {
        this.radio = 2
      } else {
        this.radio = 0
      }
      if(this.fileList.length>0){
         const formData = new FormData()
      formData.append('icon', this.fileList[0].file, this.fileList[0].file.name)
        console.log(this.fileList[0])


      formData.append('addr', this.value)
      formData.append('gender', this.radio)
      formData.append('age', this.stepper)
      formData.append('username', this.username)

      this.$axios.put(`${this.$settings.base_url}user/modify/${localStorage.getItem('id')}/`, formData, {
            'Content-Type': 'multipart/form-data'
          }
      ).then(res => {

        if (formData.get('icon')) {
          // this.$cookies.set('icon', res.data.icon,'7d')
          // this.$cookies.set('username', res.data.username, '7d')
          localStorage.setItem('username', res.data.username)
          localStorage.setItem('icon', res.data.icon, )
        Toast.success('修改成功');
          this.$router.push('/personal')
        }
      }).catch(reason => {
         Toast.fail('请联系管理员');
      })
      }else {
        let datalist={
          age:this.stepper,addr:this.value,gender:this.radio,username:this.username
        }
        this.$axios.put(`${this.$settings.base_url}user/modify/${localStorage.getItem('id')}/`, datalist
      ).then(res=>{
        Toast.success('修改成功');
          // this.$cookies.set('username', res.data.username, '7d')
          localStorage.setItem('username', res.data.username)
          this.$router.push('/personal')
        }).catch(reason => {
          Toast.fail('请联系管理员');
        })
      }


    },
    onConfirm(values) {
      this.value = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join('/');
      this.showArea = false;
    },

  },
  mounted() {
    this.username =localStorage.getItem('username')
    this.icon =localStorage.getItem('icon')




  },
  async beforeMount() {
    await  this.$axios.get(`${this.$settings.base_url}user/modify/${localStorage.getItem('id')}/`,
    ).then(res => {

      if (res.data.gender == '1') {
        this.value2 = '男'
      } else if (res.data.gender == '2') {
        this.value2 = '女'
      } else {
        this.value2 = '隐藏'
      }
      this.stepper = res.data.age
      this.value = res.data.addr


    })
  }


}
</script>

<style scoped>

</style>